<template>
  <!-- 昨日销售出库总数 -->
  <div class="SoldOutTodaycontent">
    <div class="SoldOutTodaycontentTlt">昨日销售出库总数</div>
    <div id="jinzita" class="jinzita">
      <Pyramid :options="ops" :data="datas" ref="inzita" />
    </div>
    <div class="btSpan">
      <span class="one" v-if="data2.length > 0"
        ><span
          class="two"
          style="
            width: 0.0521rem;
            height: 0.0521rem;
            background-color: #e7ea5e;
            margin-right: 0.013rem;
            border-radius: 0.0052rem;
          "
        />{{ data2[0].name }} {{ data2[0].value }}</span
      >
      <span class="one" v-if="data2.length > 1"
        ><span
          class="two"
          style="
            width: 0.0521rem;
            height: 0.0521rem;
            background-color: #3cf24b;
            margin-right: 0.013rem;
            border-radius: 0.0052rem;
          "
        />{{ data2[1].name }} {{ data2[1].value }}</span
      >
      <span class="one" v-if="data2.length > 2"
        ><span
          class="two"
          style="
            width: 0.0521rem;
            height: 0.0521rem;
            background-color: #7fffd9;
            margin-right: 0.013rem;
            border-radius: 0.0052rem;
          "
        />{{ data2[2].name }} {{ data2[2].value }}</span
      >
      <span class="one" v-if="data2.length > 3"
        ><span
          class="two"
          style="
            width: 0.0521rem;
            height: 0.0521rem;
            background-color: #2471fe;
            margin-right: 0.013rem;
            border-radius: 0.0052rem;
          "
        />{{ data2[3].name }} {{ data2[3].value }}</span
      >
    </div>
  </div>
</template>

<script>
import Pyramid from "@/components/jinizta/Pyramid";
import { getYesterdaySell } from "@/api/user";
export default {
  name: "SoldOutToday",
  components: {
    Pyramid,
  },
  data() {
    return {
      ops: {
        title: "企业培育",
        // 主体离边框距离
        distance: [1, 5],
        // 主体偏移值 (x,y)
        offset: [2, 0],
        // 排序(max , min)优先
        sort: "max",
        // 颜色
        color: ["#E7EA5E", "#3CF24B", "#7FFFD9", "#2471FE"],
        // 格式化字体输出
        fontFormatter: (val) => {
          return ` ${val.name}   ${val.value}%`;
        },
        tooltip: {
          show: false,
          //           formatter: (val) => {
          //             return `<div  style="margin: 0px 0 0; color:#000; line-height: 1;border-color: #fff ;background-color: #fff;;
          //                 border-width: 1px;border-radius: 4px;padding: 10px;pointer-events: none;box-shadow: rgb(0 0 0 / 20%) 1px 2px 10px;border-style: solid;white-space: nowrap;">
          //                     <div style="margin: 0px 0 0; line-height: 1">
          //                       <div style="font-size: ${14}px; font-weight: 400; line-height: 1">${
          //   val.obj.title
          // } </div>
          //                       <div style="margin: 10px 0 0; line-height: 1">
          //                         <div style="margin: 0px 0 0; line-height: 1">
          //                           <div style="margin: 0px 0 0; line-height: 1">
          //                             <span
          //                               style="
          //                                 display: inline-block;
          //                                 margin-right: 4px;
          //                                 border-radius: 10px;
          //                                 width: 10px;
          //                                 height: 10px;
          //                                 background-color:  ${val.obj.color};
          //                               "
          //                             ></span>
          //                             <span style="font-size: ${14}px; color: $[fontColor]$; font-weight: 400; margin-left: 2px"> ${
          //   val.obj.name
          // }</span>
          //                             <span style="float: right; margin-left: 20px; font-size: ${14}px; color: $[fontColor]$; font-weight: 900"> ${
          //   val.obj.value
          // } %</span>
          //                             <div style="clear: both"></div>
          //                           </div>
          //                           <div style="clear: both"></div>
          //                         </div>
          //                         <div style="clear: both"></div>
          //                       </div>
          //                       <div style="clear: both"></div>
          //                     </div>
          //                     <div style="clear: both"></div>
          //                   </div>`
          //           }
        },
        // 样式
        infoStyle: {
          // show: false,
          stroke: false,
          color: "rgba(189, 192, 214, 1.000)",
          setLineDash: [0, 0], // 虚线值
          size: 1, // 字体大小
          width: 1, // 设置多少 就会在基础上加上设置的值
          dotSize: 1, // 点大小
        },
      },
      datas: [
        { name: "生鲜", value: 1264 },
        { name: "食品干货", value: 2689 },
        { name: "日用品", value: 1689 },
        { name: "其他", value: 2824 },
      ],
      data2: [],
    };
  },
  mounted() {
    this.getYesterdaySell();
  },
  methods: {
    async getYesterdaySell() {
      const res = await getYesterdaySell();
      if (res.code === 200) {
        console.log(res.data.list, "昨日销售出库总数");
        const newArr = res.data.list.sort(function (n1, n2) {
          // return n2.number - n1.number ;
          return n1.number - n2.number;
        });
        this.$nextTick(() => {
          newArr.forEach((item) => {
            this.data2.push({ value: item.number, name: item.name });
          });
          if (newArr.length === 0) {
            res.data.list = [];
          } else if (newArr.length === 1) {
            this.ops.color = ["#E7EA5E", "#E7EA5E", "#E7EA5E", "#E7EA5E"];
          } else if (newArr.length === 2) {
            this.ops.color = ["#E7EA5E", "#E7EA5E", "#3CF24B", "#3CF24B"];
          } else if (newArr.length === 3) {
            this.ops.color = ["#E7EA5E", "#E7EA5E", "#3CF24B", "#7FFFD9"];
          } else {
            this.ops.color = ["#E7EA5E", "#3CF24B", "#7FFFD9", "#2471FE"];
          }
          console.log(this.ops.color, "this.ops.color");
          this.$refs.inzita.init();
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
.SoldOutTodaycontent {
  width: 100%;
  height: 100%;
  color: aliceblue;
  padding: 0.0651rem;
  .SoldOutTodaycontentTlt {
    height: 0.1563rem;
    line-height: 0.1563rem;
    text-align: center;
    font-size: 0.0573rem;
    font-weight: bold;
    color: #87baf8;
  }
  .jinzita {
    height: 0.7031rem;
    width: 100%;
  }
  .btSpan {
    width: 100%;
    height: 0.1563rem;
    padding-top: 0.026rem;
    padding-left: 0.0521rem;
    font-size: 0.0625rem;
    font-weight: bold;
    color: #87baf8;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .one {
      width: 50%;
      font-size: 0.0417rem;
      color: #ffffff;
      opacity: 0.8;
      display: flex;
      justify-self: start;
      .bgc1 {
        background-color: #e7ea5e;
      }
      .bgc2 {
        background-color: #3cf24b;
      }
      .bgc3 {
        background-color: #7fffd9;
      }
      .bgc4 {
        background-color: #2471fe;
      }
    }
  }
}
</style>
